<template>
  <div class="main-content-container">
    <!-- 排班计划表 -->
    <div ref="search" class="app-search">
      <!-- <el-row type="flex"> -->
      <!-- <el-col :span="12">排班计划表</el-col> -->
      <!-- </el-row> -->
      <el-row>
        <el-col :span="12"><Search ref="search" :data="selections" :data-value="weeks" :attribute="'closingDate'" @change="handleTypeChange" @dateChange="handleDateChange" /></el-col>
        <el-col :span="12" align="right" class="addBtnStyle">
          <el-button @click="addPlan">+ 增加计划</el-button>
        </el-col>
      </el-row>
    </div>
    <p class="line-height buttons">咨询师<el-button class="pull-right">修改计划</el-button></p>
    <div class="box-show marginTop">
      <el-table :data="consultantList" border :row-class-name="tableColor" height="280">
        <el-table-column label="姓名" prop="customerName" />
        <el-table-column label="周一" prop="customerSex" />
        <el-table-column label="周二" prop="complaintType" />
        <el-table-column label="周三" prop="projectName" />
        <el-table-column label="周四" prop="complaintMode" />
        <el-table-column label="周五" prop="generateWorkOrder" />
        <el-table-column label="周六" prop="receptionCustomerServiceName" />
        <el-table-column label="周日" prop="closingDate" />
      </el-table>
    </div>
    <p class="line-height buttons">面诊医生<el-button class="pull-right">修改计划</el-button></p>
    <div class="box-show marginTop">
      <el-table :data="doctorList" border :row-class-name="tableColor" height="280">
        <el-table-column label="部门" prop="customerName" />
        <el-table-column label="姓名" prop="customerName" />
        <el-table-column label="周一" prop="customerSex" />
        <el-table-column label="周二" prop="complaintType" />
        <el-table-column label="周三" prop="projectName" />
        <el-table-column label="周四" prop="complaintMode" />
        <el-table-column label="周五" prop="generateWorkOrder" />
        <el-table-column label="周六" prop="receptionCustomerServiceName" />
        <el-table-column label="周日" prop="closingDate" />
      </el-table>
    </div>
    <AddScheduling v-if="visible" :visible="visible" :title="title" :current-row="currentRow" @handleClose="visible = false" />
  </div>
</template>

<script>
import Search from "@/components/Search";
import { tableColor } from '@/utils/common.js';
import { schedulingPlan } from "@/config";
import AddScheduling from "./addScheduling";
export default {
  components: {
    Search,
    AddScheduling,
  },
  data() {
    return {
      selections: schedulingPlan,
      consultantList: [],
      doctorList: [],
      tableColor,
      title: "",
      visible: false,
      weeks: '',
      currentRow: {},
    };
  },
  mounted() {
    this.weeks = 'thisWeek';
    // this.$nextTick(() => {
    //   // debugger;
    //   this.$refs.search.scheduling();
    // });
  },
  methods: {
    addPlan() {
      this.title = "增加排班计划";
      this.visible = true;
    },
    handleTypeChange(item) {
      console.log(item);
      // this.queryParams.page = 1;
      // Object.assign(this.query, item);
      // this.getList();
    },
    handleDateChange(item) {
      // this.queryParams.page = 1;
      // Object.assign(this.query, item);
      // this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.main-content-container{
  .line-height{
    font-size: 14px;
    line-height: 32px;
    margin: 12px 0 0 0 ;
  }
  .marginTop{
    padding-bottom: 20px;
  }
}
</style>
